<template>
    <div>
        <div class="row  pt-4  col-sm-12 border-top  ">
            <div class="col-lg-6 col-xl-3 d-flex flex-column align-content-center justify-content-center align-items-center"
                v-if="optionBox1">
                <div style="height:300px;width:400px;" ref="box1"></div>
                <div class="fs-5" style="margin-top:-30px">条形图</div>
            </div>
            <div class="col-lg-6 col-xl-3  d-flex  flex-column align-content-center justify-content-center align-items-center "
                v-if="optionBox2">
                <div style="height:300px;width:400px;" ref="box2"></div>
                <div class="fs-5" style="margin-top:-30px">折线图</div>
            </div>
            <div class="col-lg-6 col-xl-3  d-flex  flex-column align-content-center justify-content-center align-items-center "
                v-if="optionBox3">
                <div style="height:300px;width:400px;" ref="box3"></div>
                <div class="fs-5" style="margin-top:-30px">饼状图</div>
            </div>
            <div class="col-lg-6 col-xl-3  d-flex  flex-column align-content-center justify-content-center align-items-center "
                v-if="optionBox4">
                <div style="height:300px;width:400px;" ref="box4"></div>
                <div class="fs-5" style="margin-top:-30px">散点图</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { echarts, optionBox1, optionBox2, optionBox3, optionBox4 } from '~src/utils/echarts/index'
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
const box1: any = ref(null);
const box2: any = ref(null);
const box3: any = ref(null);
const box4: any = ref(null);
const data = reactive({})
onBeforeMount(() => {
    //console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
    const boxinit1 = echarts.init(box1.value)
    const boxinit2 = echarts.init(box2.value)
    const boxinit3 = echarts.init(box3.value)
    const boxinit4 = echarts.init(box4.value);
    boxinit1.showLoading(); boxinit2.showLoading(); boxinit3.showLoading(); boxinit4.showLoading();
    boxinit1.setOption(optionBox1); boxinit2.setOption(optionBox2); boxinit3.setOption(optionBox3); boxinit4.setOption(optionBox4)
    boxinit1.hideLoading(); boxinit2.hideLoading(); boxinit3.hideLoading(); boxinit4.hideLoading()
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
    ...toRefs(data)
})

</script>
<style scoped lang='less'>

</style>